<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <title>教务管理系统</title>
    <link rel="stylesheet" href="layui/css/layui.css?t=20180530-2" media="all" th:href="@{/web/layui/css/layui.css}">
    <link rel="stylesheet" href="css/admin.css?t=20180530-2" media="all" th:href="@{/web/css/admin.css}">
    <link rel="stylesheet" href="css/l-style.css" th:href="@{/web/css/l-style.css}"/>
    <script type="text/javascript" src="js/echarts.js" th:src="@{/web/js/echarts.js}"></script>
    <link rel="stylesheet" href="css/l-style_8.css" th:href="@{/web/css/l-style_8.css}"/>
</head>

<body>

<!-- 主体内容 -->
<div class="layui-fluid dang_fluid" lay-title="表格列表1">
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md12">
            <div class="item_head border_all">
                <h3 class="item_tit">班级管理</h3>
            </div>
            <div class="item_box mT5">
                <table class="layui-hide" id="exampleTable" lay-filter="demo"></table>
            </div>
        </div>

    </div>
</div>
<!--窗口HTML-->
<div id="addWindow" style="display: none;margin-top: 30px">
    <form class="layui-form" action="" lay-filter="fromTest">
        <div class="layui-form-item">
            <label class="layui-form-label">班级名称</label>
            <div class="layui-input-block">
                <input type="text" name="classname" lay-verify="title" autocomplete="off" placeholder="请输入标题"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属学院</label>
            <div class="layui-input-block">
                <select name="collegeId" lay-filter="college">
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属专业</label>
            <div class="layui-input-block">
                <select name="specialtyId" lay-filter="specialty">
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属年级</label>
            <div class="layui-input-block">
                <select name="gradeId" lay-filter="grade">
                </select>
            </div>
        </div>

    </form>
</div>
<script type="text/html" id="toolbarDemo">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label" style="width: 100px">选择学院</label>
            <div class="layui-input-inline">
                <select name="collegeId" lay-filter="index-college">
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label" style="width: 100px">选择专业</label>
            <div class="layui-input-inline">
                <select name="specialtyId" lay-filter="index-specialty">
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label" style="width: 100px">选择年级</label>
            <div class="layui-input-inline">
                <select name="gradeId" lay-filter="index-grade">
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <button class="layui-btn layui-btn-sm" lay-event="search">搜索</button>
        </div>
    </div>
    <div class="layui-btn-container" style="margin-top: 00px">
        <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="getCheckData"><i
                class="layui-icon">&#xe608;</i> 添加班级
        </button>
        <button class="layui-btn layui-btn-sm" lay-event="exportTemplate" id="export"><i
                class="layui-icon"></i> 导出模板
        </button>
        <button type="button" class="layui-btn layui-btn-sm" lay-event="importTemplate" id="import"><i
                class="layui-icon"></i>导入模板
        </button>
        <button type="button" class="layui-btn layui-btn-sm" lay-event="exportInfo" id="exportStudent"><i
                class="layui-icon"></i>导出学生信息
        </button>
    </div>
</script>
<script th:src="@{/web/js/jquery.min.js}"></script>
<script th:src="@{/web/layui/layui.js}"></script>
<script th:src="@{/web/layui/layui.all.js}"></script>
<script type="text/javascript" th:src="@{/web/js/l-index.js}"></script>
<script type="text/javascript" th:src="@{/web/js/web/common/common.js}"></script>
<script>
    function collegeWindos(title, content, data) {
        layer.open({
            type: 1 //此处以iframe举例
            , title: title
            , area: ['350px', '500px']
            , shade: 0
            , maxmin: true
            , content: $(content)
            , btn: ['确定'],
            yes: function (index, layero) {
                layui.use('form', function () {
                    var form = layui.form;
                    let dataForm = form.val("fromTest");
                    $.ajax({
                        type: "post",
                        url: "http://localhost:8080/classes/add",
                        data: dataForm,
                        success(data) {
                            if (data.status == 1) {
                                ajaxSuccess(data)
                                selectAjaxData("collegeId", "http://localhost:8080/college/listajax", null, {"status": 1})
                                selectAjaxData("gradeId", "http://localhost:8080/common/grade/listajax", null, {
                                    "groupBy": "name",
                                    "sort": "name",
                                    "ASC": false
                                })
                            }
                        }, error(data) {

                        }
                    });
                });
                layer.close(index)
            },
            btnAlign: 'c',
            closeBtn: 1,
            shade: 0.8,
            shadeClose: true
            , scrollbar: true
            , success: function (layero, index) {
                selectAjaxData("specialtyId", "http://localhost:8080/specialty/listajax", "specialty", {
                    "status": 1,
                    "collegeId": $("select[lay-filter='college'] > option:first").val(),
                })
                layerFormCustom({name: "",}, data)
            }
        })
    }

    function confrimWindow(content, data) {
        layer.confirm(content, {
            btn: ["确定", "取消"]
        }, function (index, layero) {
            $.ajax({
                type: "get",
                url: "http://localhost:8080/specialty/delete?id=" + data.id,
                success(data) {
                    if (data.status == 1) {
                        layer.close(index);
                        ajaxSuccess(index, data)
                        selectAjaxData("collegeId", "http://localhost:8080/college/listajax", null, {"status": 1})
                        selectAjaxData("gradeId", "http://localhost:8080/common/grade/listajax", null, {
                            "groupBy": "name",
                            "sort": "name",
                            "ASC": false
                        })
                    }
                },
                error(data) {

                }
            })
            ;
        }, function () {
            layer.close()
        })
    }
</script>
<script type="text/javascript">
    layui.use('form', function () {
        var form = layui.form;
        form.on('select(college)', function (data) {
            selectAjaxData("specialtyId", "http://localhost:8080/specialty/listajax", "specialty", {
                "status": 1,
                "collegeId": data.value,
            })
        });
        form.on('select(index-college)', function (data) {
            selectAjaxData("specialtyId", "http://localhost:8080/specialty/listajax", "index-specialty", {
                "collegeId": $("select[lay-filter='index-college'] > option:selected").val(),
                "status": 1
            })
        });
    });
</script>
<script th:src="@{/web/js/web/admin/classes.js}"></script>
<script th:inline="javascript">
    classLib.load();
    selectAjaxData("collegeId", "http://localhost:8080/college/listajax", null, {"status": 1})
    selectAjaxData("gradeId", "http://localhost:8080/common/grade/listajax", null, {
        "groupBy": "name",
        "sort": "name",
        "ASC": false
    })

</script>
<script>
    $(function () {
        layui.use(['form', 'upload'], function () {
            let table = layui.table, upload = layui.upload;
            //监听表格复选框选择
            table.on('checkbox(demo)', function (obj) {
            });
            //头工具栏事件
            table.on('toolbar(demo)', function (obj) {
                    let checkStatus = table.checkStatus(obj.config.id);
                    let data = checkStatus.data;
                    switch (obj.event) {
                        case 'getCheckData':
                            if (data.length == 1) {
                                layer.alert("请勿选择记录");
                            } else {
                                collegeWindos("专业添加", "#addWindow", data[0]);
                            }
                            break;
                        case 'exportTemplate':
                            window.location.href = "http://localhost:8080/export/exportXlsModel"
                            break;
                        case 'importTemplate':
                            if (data.length == 0) {
                                layer.alert("请选择一个班级");
                            } else {
                                /*upload.render({
                                    elem: "#import",
                                    // type: "post",
                                    url: "http://localhost:8080/export/importXlsStudent",
                                    /!*data: {
                                        cid: function(){
                                            return data[0].id
                                        }
                                    },*!/
                                    // exts: "/xlsx/xls",
                                    // field: "myFile",
                                    // accept: 'file', //普通文件
                                    done: function (res) {
                                        console.log(res)
                                    },
                                    error(res) {
                                        alert("文件上传失败")
                                    },
                                    choose(res) {
                                        alert("文件上传")
                                    }
                                })*/
                                layui.use('upload', function(){
                                    var upload = layui.upload;

                                    //执行实例
                                    var uploadInst = upload.render({
                                        elem: '#import' //绑定元素
                                        ,url: '/upload/' //上传接口
                                        ,done: function(res){
                                            //上传完毕回调
                                        }
                                        ,error: function(){
                                            //请求异常回调
                                        }
                                    });
                                });
                            }
                            break;
                        case 'exportInfo':
                            if (data.length == 0) {
                                layer.alert("请选择一个班级");
                            } else {
                                confrimWindow("是否确定恢复该条记录", data[0])
                            }
                            break;
                        case 'search':
                            layui.table.reload('exampleTable', {
                                url: 'http://localhost:8080/classes/pageQuery'
                                , where: {
                                    "collegeId": $("select[lay-filter='index-college'] > option:selected").val(),
                                    "specialtyId": $("select[lay-filter='index-specialty'] > option:selected").val(),
                                    "gradeId": $("select[lay-filter='index-grade'] > option:selected").val()
                                } //设定异步数据接口的额外参数
                                , height: "full"
                            });
                            selectAjaxData("collegeId", "http://localhost:8080/college/listajax", null, {"status": 1})
                            selectAjaxData("gradeId", "http://localhost:8080/common/grade/listajax", null, {
                                "groupBy": "name",
                                "sort": "name",
                                "ASC": false
                            })
                            break;

                        //自定义头工具栏右侧图标 - 提示
                        case 'LAYTABLE_TIPS':
                            layer.alert('这是工具栏右侧自定义的一个图标按钮');
                            break;
                    }
                }
            );
        });
    })
</script>
</body>

</html>